<template>
  <el-dialog title="修改信息" draggable :model-value="dialogVisible" width="50%" append-to-body @close="close">
    <div class="addEngineer_container">
      <h2 class="form-title">请完善您的详细信息</h2>
      <el-form :model="addEngineer" label-width="0px" class="form-styling">
        <el-form-item prop="name">
          <el-input v-model="addEngineer.eName" placeholder="请输入您的真实姓名" size="large" class="input-styling"></el-input>
        </el-form-item>
        <el-form-item prop="contact">
          <el-input v-model="addEngineer.eContact" placeholder="请输入您的联系方式" size="large" class="input-styling"></el-input>
        </el-form-item>
        <el-form-item prop="address1">
          <el-select v-model="addEngineer.eAddress1" placeholder="请选择省或直辖市" size="large" class="input-styling" @change="regionsChange">
            <el-option v-for="eAddress1 in ea1options"
                       :key="eAddress1.cityname"
                       :label="eAddress1.cityname"
                       :value="eAddress1.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="address2">
          <el-select v-model="addEngineer.eAddress2" placeholder="请选择市或区县" size="large" class="input-styling">
            <el-option v-for="eAddress2 in ea2options"
                       :key="eAddress2.cityname"
                       :label="eAddress2.cityname"
                       :value="eAddress2.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="skill">
          <el-select v-model="addEngineer.skill" placeholder="请选择您的维修技能" size="large" class="input-styling">
            <el-option label="电视" value="电视"></el-option>
            <el-option label="空调" value="空调"></el-option>
            <el-option label="冰箱" value="冰箱"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="account">
          <el-input v-model="addEngineer.eAccount" placeholder="请绑定您的收款账户" size="large"
                    class="input-styling"></el-input>
        </el-form-item>
        <el-row justify="end">
          <el-form-item class="save_btn">
            <el-button type="primary" class="action-button" @click="save">保存</el-button>
            <el-button type="info" class="action-button" @click="reset">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineEmits, defineProps, inject, onMounted, reactive, ref, watch } from 'vue'
import router from '@/router'
import { ElMessage } from 'element-plus'

const axios = inject('$axios')

const ea1options = ref([])
const ea2options = ref([])

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  dialogVisible: Boolean
})

const addEngineer = reactive({
  eName: '',
  eContact: '',
  eAddress1: '',
  eAddress2: '',
  skill: '',
  eAccount: ''
})

onMounted(() => {
  axios.get('/logic/tools/select/regions/1').then(res => {
    ea1options.value = res.data.data
  })
})

const regionsChange = (value) => {
  axios.get('/logic/tools/select/regions/' + value).then(res => {
    ea2options.value = res.data.data
  })
}

const save = () => {
  axios.post('/logic/sysuser/engineeradd', addEngineer).then(res => {
    if (res.data.code === 200) {
      ElMessage.success('完善个人信息成功')
      router.push('/EngineerMenu')
    }
  })
}

const reset = () => {
  addEngineer.eName = ''
  addEngineer.eContact = ''
  addEngineer.eAddress1 = ''
  addEngineer.eAddress2 = ''
  addEngineer.skill = ''
  addEngineer.eAccount = ''
}

const $emit = defineEmits(['closeDialog'])

const close = () => {
  addEngineer.eName = ''
  addEngineer.eContact = ''
  addEngineer.eAddress1 = ''
  addEngineer.eAddress2 = ''
  addEngineer.skill = ''
  addEngineer.eAccount = ''
  $emit('closeDialog')
}

watch(() => props.dialogVisible, (newVal) => {
  if (!newVal) {
    close()
  }
})
</script>

<style scoped>
.addEngineer_container {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f5f5f5;
}

.form-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form-styling {
  width: 100%;
  max-width: 600px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.input-styling {
  width: 100%;
}

.save_btn {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.action-button {
  padding: 10px 20px;
  border-radius: 5px;
}

.action-button:hover {
  opacity: 0.8;
}
</style>
